<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
    <title>IIS管理</title>
    <link type="text/css" rel="stylesheet" th:href="@{/assets/lib/elementui/index.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/assets/css/index.css}">
</head>
<body>
<div v-cloak id="app">
    <div class="layout">
        <el-container>
            <el-header>
                <div>
                    <img th:src="@{/assets/image/iis-logo.png}" alt="" />
                    <span>IIS在线管理</span>
                </div>
            </el-header>
            <el-main>
                <div class="search-panel">
                    <el-input suffix-icon="el-icon-search"
                              placeholder="输入网站名称进行搜索..."
                              clearable
                              v-model.trim="keywords"
                              @input="searchHandler">
                    </el-input>
                </div>
                <el-table stripe
                          border
                          size="medium"
                          :data="searchDatas">
                    <el-table-column label="序号" align="center" type="index" width="55"></el-table-column>
                    <el-table-column prop="siteName" label="网站"></el-table-column>
                    <el-table-column prop="bindings" label="绑定" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-link type="primary"
                                     v-if="scope.row.url"
                                     :title="scope.row.bindings"
                                     target="_blank"
                                     :href="scope.row.url"
                                     v-text="scope.row.bindings"></el-link>
                            <span v-else
                                  :title="scope.row.bindings" v-text="scope.row.bindings"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="physicalPath" label="虚拟路径" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="siteState" label="网站状态" width="100">
                        <template slot-scope="scope">
                            <el-tag type="info" size="small" v-if="scope.row.siteState==='Stopped'">已停止</el-tag>
                            <el-tag type="success" effect="dark" size="small" v-else>已启动</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="apppoolState" label="应用池状态" width="100">
                        <template slot-scope="scope">
                            <el-tag type="info" size="small" v-if="scope.row.apppoolState==='Stopped'">已停止</el-tag>
                            <el-tag type="success" effect="dark" size="small" v-else>已启动</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="400">
                        <template slot-scope="scope">
                            <el-button type="text" size="small"
                                       v-if="scope.row.siteState==='Stopped'"
                                       @click="siteState(scope.row.id, 'start')">启动网站</el-button>
                            <el-button type="text" size="small"
                                       v-else @click="siteState(scope.row.id, 'stop')">停止网站</el-button>
                            <el-button type="text" size="small"
                                       @click="siteState(scope.row.id, 'restart')">重启网站</el-button>

                            <el-button type="text" size="small"
                                       v-if="scope.row.apppoolState==='Stopped'"
                                       @click="apppoolState(scope.row.id, 'start')">启动应用池</el-button>
                            <el-button type="text" size="small"
                                       v-else @click="apppoolState(scope.row.id, 'stop')">停止应用池</el-button>
                            <el-button type="text" size="small"
                                       @click="apppoolState(scope.row.id, 'recycle')">回收应用池</el-button>

                            <el-button type="text" size="small"
                                       @click="showFile(scope.row)">管理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
    <show-file-dialog ref="showFileDialog"></show-file-dialog>
</div>
<script type="text/javascript" th:src="@{/assets/lib/vue.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/lib/elementui/index.js}"></script>
<script type="text/javascript" th:src="@{/assets/lib/axios.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/vue-utils.js}"></script>
<div th:replace="components/show-file-dialog::show-file-dialog"></div>
<script type="text/javascript" th:src="@{/assets/js/index.js}"></script>
</body>
</html>
